<script setup>
import axios from "axios";
import * as echarts from "echarts";
import {markRaw, onMounted, ref} from "vue";

const line = ref()
const myChart = ref()
const option = ref({})
const data = ref()
const init = async () => {
  await axios.get('http://127.0.0.1:5000/line').then(res => {
    data.value = res.data
  })
  myChart.value = markRaw(echarts.init(line.value));
  draw();
}
const draw = () => {
  option.value = {
    title: {
      text: '三大产量增加值折线图',
      left: 'center',
      top:'4%',
      textStyle: {
        color:'#ffffff'
      }
    },
    xAxis: {
      type: 'category',
      data: data.value.year
    },
    yAxis: {
      type: 'value'
    },
    tooltip: {},
    legend: {
      bottom: '5%',
      textStyle: {
        color: '#ffffff'
      }
    },
    grid: {
      left: '15%'
    },
    series: [
      {
        name: '第一产业',
        data: data.value.first_line,
        type: 'line'
      },
      {
        name: '第二产业',
        data: data.value.second_line,
        type: 'line'
      },
      {
        name: '第三产业',
        data: data.value.third_line,
        type: 'line'
      }
    ]
  }
  myChart.value.setOption(option.value, {notMerge: true});
}
onMounted(() => {
  init()
})

</script>

<template>
  <div class="line" ref="line"></div>
</template>

<style scoped>
.line {
  width: 100%;
  height: 100%;
}
</style>